Code Playground

<div class="track-name">Track Name</div>

<div class="track-artist">Track Artist</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>
<script>
  let now_playing = document.querySelector(".now-playing");
  let track_art = document.querySelector(".track-art");
  let track_name = document.querySelector(".track-name");
  let track_artist = document.querySelector(".track-artist");
  let playpause_btn = document.querySelector(".playpause-track");
  let next_btn = document.querySelector(".next-track");
  let prev_btn = document.querySelector(".prev-track");
  let seek_slider = document.querySelector(".seek_slider");
  let volume_slider = document.querySelector(".volume_slider");
  let curr_time = document.querySelector(".current-time");
  let total_duration = document.querySelector(".total-duration");
  let track_index = 0;
  let isPlaying = false;
  let updateTimer;
  let curr_track = document.createElement('audio');
  let track_list = [{
      name: "Friends",
      artist: "Annne marie",
      image: "https://i.ibb.co/gyMx6jp/MV5-BNm-Y0-OWFl-Mz-Yt-MDNk-ZC00-YTdh-LWI4-ZWEt-M2-I5-OWZl-Yz-Vk-NGQz-Xk-Ey-Xk-Fqc-Gde-QXVy-Nj-E0-ODc.jpg",
      path: "https://dl.dropbox.com/s/u71atlmtiuqy0sh/marshmello%20%26%20anne-marie%20-%20friends%20official%20friendzone%20anthem%20.mp3?dl=0"
    },
    {
      name: "on and on",
      artist: "daniel levi, cartoon",
      image: "https://i.ibb.co/HrSqtBf/on-on-feat-daniel-levi-1586947008-oe-I24in2-Ga.jpg",
      path: "https://dl.dropbox.com/s/ffjre8pa1rwyos0/cartoon%20-%20on%20%26%20on%20feat.%20daniel%20levi.mp3?dl=0"
    },
    {
      name: "lily",
      artist: "Alan walker, K-391",
      image: "https://i.ibb.co/QrDKg6D/artworks-000505975749-bzcc02-t500x500.jpg",
      path: "https://dl.dropbox.com/s/dbjlg9vlnxfigna/alan%20walker%2C%20k-391%20%26%20emelie%20hollow%20-%20lily.mp3?dl=0"
    },
    {
      name: "The spectre",
      artist: "Alan walker",
      image: "https://i.ibb.co/b63hHBh/sddefault.jpg",
      path: "https://dl.dropbox.com/s/m872xq4clz4v2me/Alan%20Walker%20-%20The%20Spectre.mp3?dl=0"
    },
    {
      name: "Lut gaye",
      artist: "Jubin nautiyal",
      image: "https://i.ibb.co/JyxNSHJ/size-xxl.jpg",
      path: "https://dl.dropbox.com/s/nwdabj6mep7htaz/lut%20gaye%20-%20jubin%20nautiyal%20emraan%20hashmi%2C%20yukti%20thareja%20tanishk%20bagchi%2C%20manoj%20muntashir.mp3?dl=0"
    },
    {
      name: "Fearless pt 2",
      artist: "Chris linton (NCS)",
      image: "https://i.ibb.co/tZTfhMN/fearless-pt-ii-feat-chris-linton-1586953398-Ys-Sdm2v-Gwu.jpg",
      path: "https://dl.dropbox.com/s/nbjfg8jju9eq12o/lost%20sky%20-%20fearless%20pt.ii%20%28feat.%20chris%20linton%29%20%5Bncs%20release%5D.mp3?dl=0"
    },
    {
      name: "Faded",
      artist: "Alan walker",
      image: "https://i.ibb.co/gmkbSmB/maxresdefault.jpg",
      path: "https://dl.dropbox.com/s/nxn9ikzexquz62q/Faded%28PaglaSongs%29.mp3?dl=0"
    },
    {
      name: "it's ain't me",
      artist: "Kygo, selena gomez",
      image: "https://i.ibb.co/wS0c3vy/It-Ain-t-Me-Official-Single-Cover-by-Kygo-Selena-Gomez.png",
      path: "https://dl.dropbox.com/s/8ropc1e0t0bdti7/kygo%2C%20selena%20gomez%20-%20it%20ain%20t%20me%20%28official%20video%29.mp3?dl=0"
    },
    {
      name: "teri mitti",
      artist: "manoj muntashir",
      image: "https://i.ibb.co/5c8Nzg0/68426152.jpg",
      path: "https://dl.dropbox.com/s/uufy5zu12yv1tqg/teri%20mitti%20-%20kesari%20akshay%20kumar%20%26%20parineeti%20chopra%20arko%20b%20praak%20manoj%20muntashir.mp3?dl=0",
    },
    {
      name: "Ghungroo",
      artist: "arijit singh",
      image: "https://i.ibb.co/N7hfw9K/size-xxl-1567659563.webp",
      path: "https://dl.dropbox.com/s/929y795pfe4k8nd/ghungroo%20full%20song%20war%20hrithik%2C%20vaani%2C%20arijit%20singh%2C%20shilpa%20vishal%20%26%20shekhar%2C%20kumaar.mp3?dl=0"
    },
    {
      name: "tera yaar hu main",
      artist: "arijit singh",
      image: "https://i.ibb.co/7XyqBbL/artworks-000509482761-b6y4ob-t500x500.jpg",
      path: "https://dl.dropbox.com/s/is8ixvvxmykf17e/Tera%20Yaar%20Hoon%20Main%20320%20Kbps.mp3?dl=0"
    },
    {
      name: "Heroes tonight",
      artist: "janji and johnning",
      image: "https://i.ibb.co/Sd45s6T/hqdefault.jpg",
      path: "https://dl.dropbox.com/s/xvm4fimqx38wxrw/janji%20-%20heroes%20tonight%20%28feat.%20johnning%29%20%5Bncs%20release%5D.mp3?dl=0"
    },
    {
      name: "señorita",
      artist: "camilla cabello",
      image: "https://i.ibb.co/7j4bQ0r/artworks-000556991832-l4o08x-t500x500.jpg",
      path: "https://dl.dropbox.com/s/e7d3kagcxwjjp0l/shawn%20mendes%2C%20camila%20cabello%20-%20se%C3%B1orita.mp3?dl=0"
    },
    {
      name: "Good 4 U",
      artist: "olivia rodrigo",
      image: "https://i.ibb.co/ykr8yyH/Fv-HKF4r-FFy-Sd-FY3-U7.jpg",
      path: "https://dl.dropbox.com/s/uown780ykqzp2ur/olivia%20rodrigo%20-%20good%204%20u.mp3?dl=0"
    },
  ];

function loadTrack(track_index) {
    clearInterval(updateTimer);
    resetValues();
    curr_track.src = track_list[track_index].path;
    curr_track.load();
    track_art.style.backgroundImage = "url(" + track_list[track_index].image + ")";
    track_name.textContent = track_list[track_index].name;
    track_artist.textContent = track_list[track_index].artist;
    updateTimer = setInterval(seekUpdate, 1000);
    curr_track.addEventListener("ended", nextTrack);
  }

function resetValues() {
    curr_time.textContent = "00:00";
    total_duration.textContent = "00:00";
    seek_slider.value = 0;
  }

function playpauseTrack() {
    if (!isPlaying) playTrack();
    else pauseTrack();
  }

function playTrack() {
    curr_track.play();
    isPlaying = true;
    playpause_btn.innerHTML = '<span class="fa fa-pause-circle fa-4x" id="icon10"></span>';
  }

function pauseTrack() {
    curr_track.pause();
    isPlaying = false;
    playpause_btn.innerHTML = '<span class="fa fa-play-circle fa-4x" id="icon9"></span>';;
  }

function nextTrack() {
    if (track_index < track_list.length - 1)
      track_index += 1;
    else track_index = 0;
    loadTrack(track_index);
    playTrack();
  }

function prevTrack() {
    if (track_index > 0)
      track_index -= 1;
    else track_index = track_list.length;
    loadTrack(track_index);
    playTrack();
  }

function seekTo() {
    seekto = curr_track.duration * (seek_slider.value / 100);
    curr_track.currentTime = seekto;
  }

function setVolume() {
    curr_track.volume = volume_slider.value / 100;
  }

function time() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = correctTime(m);
    s = correctTime(s);
    document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
    var t = setTimeout(time, 1000);
  }

function correctTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }
  time();

function like() {
    document.getElementById("icon5").style.color = "#ff4a6a";
  }

function random() {
    document.getElementById("icon4").style.color = "#ff4a6a";
  }

function mute() {
    document.getElementById("icon6").style.color = "#ff4a6a";
  }
</script>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

body {
  background: linear-gradient(120deg, #ff99ab 10%, #ff859a 25%, #ff4a6a 65%);
  color: #ff2349;
  font-family: "Montserrat", sans-serif;
}

.container {
  height: 100%;
  width: 90%;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  border-radius: 40px;
  background: #ffe7eb;
}

.main {
  height: 97.4vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.format {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.track-art {
  height: 200px;
  width: 200px;
  /*background-image: URL("https://source.unsplash.com/Qrspubmx6kE/640x360");*/
  background-size: cover;
  background-position: center;
  border-radius: 30px;
  margin-bottom: 20px;
  margin-top: 0%;
  border: 4px solid #ff4a6a;
}

.track-name {
  font-size: 2rem;
  padding-bottom: 10px;
}

.track-artist {
  font-size: 1.2rem;
  padding-top: 5px;
}

.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.playpause-track,
.prev-track,
.next-track {
  padding: 20px;
  padding-bottom: 0px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.playpause-track:hover,
.prev-track:hover,
.next-track:hover {
  opacity: 1;
}

.slider_container {
  width: 95%;
  max-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.seek_slider,
.volume_slider {
  -webkit-appearance: none;
  appearance: none;
  height: 7.5px;
  background: #ff2349;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 7px;
}

.seek_slider::-webkit-slider-thumb,
.volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #ff859a;
  cursor: pointer;
  border-radius: 50%;
}

.seek_slider:hover,
.volume_slider:hover {
  opacity: 1;
}

.seek_slider {
  width: 100%;
}

.volume_slider {
  width: 75%;
}

.current-time,
.total-duration {
  padding: 15px;
}

i.fa-volume-down,
i.fa-volume-up {
  padding: 15px;
}

.icon {
  padding: 20px;
}

span {
  color: #ff2349;
}

.tools {
  padding: 10px;
}

#clock {
  padding: 20px;
  font-size: 20px;
}

#icon5 {
  color: #ffc0cb;
}

#icon4 {
  color: #ffc0cb;
}

#icon6 {
  color: #ffc0cb;
}

Frontend Forever App